iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1
永豐金融APIs

永豐Vue一下-從生活尋找靈感系列 第 19

[day19]Vue實作-登入功能實作串接後端API(上)調整bootstrapvue

  • 分享至 

  • xImage
  •  

框架用好了之後,就是一些功能的串接囉,
還記得之前使用json串接的畫面嗎?現在要從網站的登入畫面進行登入,同時也準備註冊的畫面
登愣
結果測試發現因為使用bootstrapvue又卡關了,這邊直接秀出調整後的程式碼

<div>
  <b-tabs content-class="mt-2">
    <b-tab title="Login" active>
        <h5 class="text-center">Login Please</h5>
        <div class="form-group">
            <label for="exampleInputEmail1">Account</label>
            <!-- <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> -->
            <input type="email" v-model="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter Account">
            <small class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <!-- <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> -->
            <input type="password" @keyup.enter="register" v-model="password" class="form-control" id="password" placeholder="Password">
        </div>

        <div class="form-group">
            <!-- <button class="btn btn-primary">Login</button> -->
            <button class="btn btn-primary" @click="login">Login</button>
        </div>
    </b-tab>
    <b-tab title="Register">
        

        <h5 class="text-center">Create New Account</h5>

        <div class="form-group">
            <label for="email">Account</label>
            <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter Account">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Password">
        </div>

        <div class="form-group">
            <!-- <button class="btn btn-primary">Register</button> -->
            <button class="btn btn-primary" @click="login">Login</button>
        </div>
    </b-tab> 
  </b-tabs>
</div>

兩個畫面可以正常切換囉

https://ithelp.ithome.com.tw/upload/images/20211004/20140924ifSTOyIbLT.png

今天家庭出遊,就寫個段落~
明天正式連接後端的json server!!


上一篇
[day18]Vue實作-會員中心主頁
下一篇
[day20]Vue實作-登入功能實作串接後端API(下)
系列文
永豐Vue一下-從生活尋找靈感30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言